body,p,input,ul,li,dl,dt,dd,form{margin:0;padding:0;list-style:none;vertical-align:middle;}
h1,h2,h3,h4,h5,h6,strong,em{font-weight:normal;font-style:normal;}
img{border:0;}
a{text-decoration:none;}
html{font-size:100%;}
a{color:#333;text-decoration:none;}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:" ";font-size:0;}
.clearfix{zoom:1;}
p{display:block;-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;}
body{background:url('/images/back.jpg')  no-repeat center center fixed;background-size:cover;}


.panel-body{width:100%;height:500px;}
.user-content{
    overflow-x:hidden;
    color: #fff;
}
.user-content ul li{display:block;border-bottom:1px solid #999;cursor: pointer;color: #fff;position: relative;}

.user-content ul li .cover{
    position: absolute;
    top: 0;
    left: 0;width: 100%;
    height: 100%;
    vertical-align: middle;
    background: rgba(0,0,0,0.6);
}
.user-content ul li button{
    position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}



.user-content ul li a{display:block;text-decoration:none;}
.user-content ul li img{margin: 10px 5px 10px 5px;width:45px;height:45px;}
.user-content ul li i{
    float: right;
    line-height: 66px;
}
.user-content ul li i img {
    width: 20px;
    height: 20px;
    margin: 0;
}

.user-content ul li span{font-size:16px;}
.container.chat{margin-top:100px;}
.chat .panel{background:rgba(0,0,0,.6);}
.mask{position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;background:rgba(0,0,0,.7);}
.mask .jumbotron{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.message-receive,.message-reply{padding-bottom:10px;}
#messageUl .time{
    text-align:center;color: #fff;
}
#messageUl .time i{
    width: 12px;height: 12px;display: inline-block;background: url("/images/clock.png");
    background-size: cover;margin-left: 5px;
}
.message-info{position:relative;overflow:hidden;}

.img-thumbnail{display:inline-block;padding:4px;width:100% \9;height:auto;max-width:100%;border:1px solid #ddd;border-radius:4px;background-color:#fff;line-height:1.42857143;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
.user-avatar{position:absolute;top:0;width:40px;height:40px;}
.message-reply .user-avatar{right:0;}
.message-reply .name{
    text-align: right;color: #fff;margin-right: 60px;
}

.message-receive .user-avatar{left:0;}
.message-receive .name{margin-left: 60px;  color: #fff;}
.message-content-box{position:relative;padding:8px;border-radius:5px;word-break:break-word;}
.message-reply .message-content-box{float:right;margin-right:60px;background:#b8db29;color:#333;}
.message-receive .message-content-box{float:left;margin-left:60px;background:#EEE;color:#333;}
.message-content-box .arrow{position:absolute;top:5px;width:0;height:0;border-style:solid;border-width:5px;font-size:0;}
.message-reply .message-content-box .arrow{right:-10px;border-color:transparent transparent transparent #b8db29;}
.message-receive .message-content-box .arrow{left:-10px;border-color:transparent #EEE transparent transparent;}
.message-content{overflow:hidden;max-width:500px;word-wrap:break-word;}

.dialog{
    display: none;
}

.ptpChat {
    right: 20px;
    left: auto;
    top: 100px;
    position: absolute;
    z-index: 10000;
}
.ptpChat .panel-body{
    height:200px;
}
.room{
    color: #fff;
}
.ptpChat .btn{
    padding: 6px;
}
#ptpUl span{
    float:right;
    color: #fff;
}
.room-receive{
    background: #247B2E;
}